<template>
  <div class="group-page">
    <div class="item" v-for="(item, index) in groupList" :key="index">
      <div class="info" @click="navTo(item.groupId)">
        <div class="log">
          <img :src="item.img" mode="aspectFill" class="img">
          <span class="state">{{item.preStatus}}</span>
        </div>
        <div class="pInfo">
          <h3 class="name">{{item.title}}</h3>
          <p class="time">创建时间:  {{item.createTime}}</p>
        </div>
      </div>
      <div class="btnGroup">
        <button @click.stop="copyFn(item.groupId)">复制</button>
        <button @click.stop="editFn(item.groupId)">编辑</button>
        <button @click.stop="stopFn(item.groupId)">截止</button>
        <button open-type="share" :title="item.title" :id="item.groupId">分享</button>
      </div>
    </div>

    <tab-bar />
    <nullList v-if="showNull" config="{}"></nullList>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'
import nullList from '@/components/nullList'
import { imagesLink, timeStamp, overNowTime, timeSort, userLogin, paging } from '@/utils/index'
export default {
  name: '',
  data () {
    return {
      groupList: [],
      showNull: false
    }
  },
  components: {
    TabBar,
    nullList
  },
  methods: {
    navTo (link) {
      wx.navigateTo({
        url: '/pages/group-detail/main?groupId='+ link
      })
    },
    async requestFn () {
      var that = this
      this.page = 1
      this.load = true
      this.showNull = false
      this.groupList = []

      wx.showToast({
        icon: 'loading',
        title: '请求中...',
        duration: 50000
      })
      var groupList = await this.$request({
        url: '/GroupBuyBackendV1/groupBuyInfoByCreatorId/' + wx.getStorageSync('userId')
      })

      if (groupList.length == 0) {
        this.showNull = true
      }
      wx.hideToast()
      
      groupList.forEach(function(item, index) {
        item.img = imagesLink(item.images.split(','), 1)
        item.createTime = timeStamp(item.createTime)
        //超时
        if (item.dueDatetime && overNowTime(item.dueDatetime)) {
          item.preStatus = '已截止'
        }
      })
      wx.hideToast()
      timeSort(groupList)
      this.dataList = groupList

      var res = paging(groupList)
      if (res.data) {
        this.load = false
        this.groupList = res.data
        this.page++
        res.haveNext ? this.load = true : this.load = false
      }

    },
    copyFn (gid) {
      wx.showModal({
        content: '是否复制该团购创建一个新团购',
        success (res) {
          if (res.confirm) {
            wx.navigateTo({
              url: '/pages/update/main?type=copy&groupId='+ gid
            })
          }
        }
      })
    },
    editFn (gid) {
      this.groupList.forEach(function(item, index) {
        if (item.preStatus == '已截止') {
          wx.showToast({
            icon: 'none',
            title: '该团已经截止，请重新创建'
          })
          return;
        }
      })
      wx.showModal({
        content: '是否编辑此团',
        success (res) {
          if (res.confirm) {
            wx.navigateTo({
              url: '/pages/update/main?type=update&groupId='+ gid
            })
          }
        }
      })
    },
    stopFn (gid) {
      var that = this
      wx.showModal({
        content: '是否截止此团',
        success (res) {
          if (res.confirm) {
            //修改order状态
            that.stopOrder(gid)
          }
        }
      })
    },
    async stopOrder (id) {
      var that = this
      var data = null
 
      //查找gid对应的数据
      this.groupList.forEach(function(item, index) {
        if (item.groupId == id) {
          data = that.groupList[index]
          data.preStatus = '已截止'
          delete data.img
          delete data.createTime
        }
      })
      if (data) {
        wx.showToast({
          icon: 'loading',
          duration: 50000,
          title: '请求中...'
        })
        var res = await this.$request({
          url: '/GroupBuyBackendV1/groupBuyInfo',
          data: data,
          type: 'POST'
        })
        if (res.groupId) {
          wx.showToast({
            icon: 'none',
            title: '该团购已截止'
          })
          setTimeout(function() {
            that.requestFn()
          }, 1000)
        }
      }
    }
  },
  mounted () {
    userLogin()
    this.requestFn()
  },
  onReachBottom () {
    var that = this
    if (this.load == true) {
      this.load = false
      var res = paging(this.dataList, this.page)
   
      if (res.data) {
        res.data.forEach(function(item, index) {
          that.groupList.push(item)
        })
        this.load = true
        this.page++
      }
      if (!res.haveNext) {
        this.load = false
      }
    }
  },
  onShareAppMessage (e) {
    var title = wx.getStorageSync('shareTitle')
    var path = '/pages/index/main'

    if (e.from == 'button') {
      var gid = e.target.id

      this.groupList.forEach(function(item, index) {
        if (item.groupId == gid) {
          title = item.title
          path = '/pages/group-detail/main?groupId='+ item.groupId
        }
      })
      return {
        path: path,
        title: title,
        imageUrl: '/static/img/index/background.jpg',
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .group-page {
    .item {
      background: #ffffff
      border-radius: 16rpx
      margin: 32rpx 30rpx
      padding: 32rpx 0
      box-shadow: 0 10rpx 20rpx #eee
      .info {
        overflow: hidden
        margin: 0 48rpx
      }
      .log {
        float: left
        width: 96rpx
        height: 96rpx
        overflow: hidden
        position: relative
        border-radius: 16rpx
        box-sizing: border-box
        .img {
          width: 96rpx
          height: 96rpx
        }
        .state {
          color: #fff
          text-align: center
          font-size: 15rpx
          position: absolute
          left: 0
          bottom: 0
          width: 100%
          padding: 6rpx 0 0 5rpx
          background: rgba(0,0,0,.6)
        }
      }
      .pInfo {
        float: left
        margin-left: 20rpx
        .name {
          margin-top: 10rpx
          font-size: 36rpx
        }
        .time {
          margin-top: 6rpx
          color: #d3d3d3
          font-size: 22rpx
        }
      }
      .btnGroup {
        margin: 32rpx 10rpx 0
        padding-top: 20rpx
        display: flex
        color: #3f3f3e
        justify-content: space-around
        border-top: 1px solid #f6f6f6
        button {
          display: block
          font-size: 26rpx
          text-align: center
          background: #fff
          line-height: normal
          &::after {
            border: none
          }
        }

      }
    }
  }

</style>
